<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>订单详情</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="sass/style.css">
</head>
<body>
    <div class="out">
        <div class="loading" :class="{dis:isShows}">
            <span class="img">
                <img src="img/loading.gif" alt=""><br>
                loading...
            </span>
        </div>
        <section class="o-top">
            <section>
                <div v-cloak>{{info.productName}}</div>
                <div v-cloak>订单号：{{info.orderId}}</div>
                <div v-cloak>由{{info.insuComName}}承保</div>
            </section>
            <section>
                <img src="./img/pay_al.png" v-if="info.orderStatus == 3" alt="">
                <img src="./img/pay_expired.png" v-if="info.orderStatus == 2" alt="">
                <img src="./img/pay_to.png" v-if="info.orderStatus == 1" alt="">
            </section>
        </section>
        <section class="o-plan">
            <div v-cloak class="plan-name" @click="isShow">
                <span >{{info.packageName ? info.packageName : '保障计划'}}</span>
                <i class="iconfont icon-xiajiantou" :class="{active : isActive}"></i>
            </div>
        </section>
        <transition name="fade">
            <div class="info-out" v-if="isActive">
                <section v-for="(item,index) in List">
                    <span  v-html="item.item"></span>
                    <span style="text-align: right"  v-html="item.amount"></span>
                </section>
            </div>
        </transition>
        <div class="o-cost">
            <span class="cost-title">保险费用</span>
            <span v-cloak class="o-gray">{{info.premium}}</span>
        </div>
        <div class="o-date">
            <span class="cost-title">起保日期</span>
            <span v-cloak class="o-gray">{{info.startDate}}</span>
        </div>
        <div class="o-cost">
            <span class="cost-title">保障时间</span>
            <span v-cloak class="o-gray">{{info.ensureName}}</span>
        </div>
        <div class="o-date">
            <span class="cost-title">缴费年限</span>
            <span v-cloak class="o-gray">{{info.payName}}</span>
        </div>
        <div class="o-cost">
            <span class="cost-title">投保人</span>
            <span v-cloak class="o-gray">{{info.applicantName}}</span>
        </div>
        <div class="o-date">
            <span class="cost-title">受益人</span>
            <span v-cloak class="o-gray">{{info.benefit}}</span>
        </div>
        <section class="insured">
            <div class="insured-name">被保险人</div>
            <ul>
                <li v-for="(item,index) in info.insuredReqDtoList">
                    <div>
                        <span class="cost-title">被保险人</span>
                        <span v-cloak>{{item.name}}</span>
                    </div>
                    <div>
                        <span class="cost-title">身份证号</span>
                        <span v-cloak>{{item.certNo}}</span>
                    </div>
                    <div>
                        <span class="cost-title">职业类型</span>
                        <span v-cloak>{{item.career}}</span>
                    </div>
                    <div>
                        <span class="cost-title">居住地址</span>
                        <span v-cloak>{{item.address}}</span>
                    </div>
                </li>
            </ul>
        </section>
        <section class="insured">
            <div class="insured-name">缴费银行账户</div>
            <ul>
                <li >
                    <div>
                        <span class="cost-title">开户银行</span>
                        <span v-cloak>{{info.bankDeposit}}</span>
                    </div>
                    <div>
                        <span class="cost-title">银行账户</span>
                        <span v-cloak>{{info.bankAmount}}</span>
                    </div>
                </li>
            </ul>
        </section>
        <section class="guide" @click="guideChange">
            <span>理赔指南</span>
            <i class="iconfont icon-xiajiantou" :class="{on : isOn}"></i>
        </section>
        <transition name="fade">
            <img src="./img/guide.png" alt="" v-if="isOn">
        </transition>
        <section>
            <span class="check">查看<span @click="closeNtice2">《客户告知书及投保人申明》</span>、<span @click="closeKonw2">《投保须知》</span>、<a  href="js/2.pdf">《保险条款》</a>和<a href="js/1.pdf">《理赔相关资料》</a></span>
        </section>
        <div class="tips_show" id="tips_show1">
            <div class="tips_top">
                《投保须知》
                <i @click="closeKonw">×</i>
            </div>
            <header>投保须知</header>
            <div class="tips_cont">
                <span class="title1">一、投保须知</span><br>
                <span class="title2">1、购买区域</span><br>
                您购买的保险产品由百年人寿保险股份有限公司承保，目前该公司在大连、湖北、河北、辽宁、北京、河南、黑龙江、安徽、山东、江苏、四川、福建、陕西、内蒙古、吉林、江西、山西、浙江、广东和重庆地区设有分支机构，本产品在本公司设有分公司的区域销售。<br>
                <span class="title2">2、保单形式</span><br>
                百年人寿通过XXX销售保险产品的合同订立均采取电子保单形式，您在投保成功后24小时内，电子保单会发送到您填写的投保人邮箱中，电子保单与纸质保单具有同等法律效力。如您需要纸质保单或发票，请拨打客服热线：（0411）95542申请。<br>
                <span class="title2">3、如实告知</span><br>
                1）投保人应就提出的询问据实告知并就各项内容如实填写，否则保险公司有权按照《中华人民共和国保险法》解除保险合同或不承担保险责任。<br>
                2）投保时，本人已就该产品的保障内容、保险金额及受益人向被保险人进行了明确说明，并征得其同意。本人知道仅可为本人、子女、配偶、父母投保，如果选择身故或全残保险金责任，本人知道仅可为本人、未成年子女投保，否则出险后无法顺利获得理赔。<br>
                3）请您认真阅读保险条款、投保提示书，特别就条款中有关责任免除和投保人、被保险人义务的内容进行详细了解，确认接受条款的全部内容并了解保单利益的不确定性。<br>
                <span class="title2">4、支付方式</span><br>
                1）本产品缴费为多年交费方式，一年后的保险费用，保险公司将从约定账户按照合同约定的方式和金额划转。<br>
                2）	理赔款将会在百年人寿审核通过后打入您提供的指定银行卡账户。<br>
                <span class="title2">5、犹豫期</span><br>
                本产品自电子保险合同发出之日起15日内为犹豫期。在此期间如果您认为本产品与您的需求不相符，可以提出解除保险合同，我们将退还您所交的保险费，此时不会有损失。如果超过犹豫期退保，百年人寿将退还您现金价值，此时有一定的损失，请您慎重。<br>
                <span class="title2">6、服务</span><br>
                1）为保证您的合法权益，您可拨打百年人寿全国统一客服专线(0411)95542查询保单信息或验证保单；关注百年人寿微信公众号百年人寿一保通进行保单验真及自助保全操作。无法自助申请的保全项目，请至百年人寿开设的各分支机构柜面办理。<br>
                2）	为了维护您的合法权益，百年人寿会在保单生效后进行在线或电话回访。百年人寿全国统一客服回访显示号码为：95542。<br>
                3）	有关保单的任何查询、投诉、咨询以及投保、承保、理赔、保全、退保的办理流程及保险赔款、退保金、保险金的支付方式，您可以通过我们的客服热线（0411）95542进行咨询。<br>
                <span class="title2">7、信息安全</span><br>
                目前我公司互联网保险业务，均已采用加密传输协议（https）或证书方式进行信息加密传输，通过技术和管理手段，对涉及投保人的信息安全加以保障，保护用户个人信息安全。<br>
                <span class="title2">8、偿付能力告知及风险综合评级</span><br>
                百年人寿保险股份有限公司2018年第2季度综合偿付能力充足率为101%，2018年第1季度风险综合评级（分类监管）结果为B类，偿付能力充足率达到监管要求。<br>
                <span  class="title1"> 二、产品须知</span><br>
                <span class="title2">1、	条款</span><br>
                本产品适用条款为《百年康惠保（旗舰版）重大疾病保险条款》，报备文件编号为百保发[2018]319号。<br>
                <span class="title2">2、	投保年龄及保额规则</span><br>
                本产品承保年龄为28天-55周岁，从事1-6类职业，能正常工作或生活的人士。被保险人出生满28天-40周岁累计重疾风险保额不超过50万（未成年人累计身故保额以监管机关规定的最高保额为准），年满41-50周岁累计重疾风险保额不超过30万，51-55周岁累计重疾风险保额不超过10万。<br>
                <span class="title2">3、	等待期</span><br>
                本产品合同生效日或合同中止后的最后复效日（以较迟者为准）起90日为等待期。为确保您的权益，请认真阅读条款中关于等待期的内容。<br>
                <span class="title2">4、	责任免除：</span><br>
                &nbsp;&nbsp;&nbsp;&nbsp;因下列情形之一，导致被保险人身故或全残的，我们不承担给付身故或全残保险金的责任：<br>
                &nbsp;&nbsp;&nbsp;&nbsp;（1）投保人对被保险人的故意杀害、故意伤害；<br>
                &nbsp;&nbsp;&nbsp;&nbsp;（2）被保险人故意犯罪或抗拒依法采取的刑事强制措施；<br>
                &nbsp;&nbsp;&nbsp;&nbsp;（3）被保险人在本合同成立或合同效力最后恢复之日起2年内自杀，但被保险人自杀时为无民事行为能力人的除外；<br>
                &nbsp;&nbsp;&nbsp;&nbsp;（4）被保险人服用、吸食或注射毒品 或未遵医嘱使用管制药品 ；<br>
                &nbsp;&nbsp;&nbsp;&nbsp;（5）被保险人酒后驾驶 机动车 、无合法有效驾驶证驾驶 机动车或驾驶无有效行驶证 的机动车；<br>
                &nbsp;&nbsp;&nbsp;&nbsp;（6）战争、军事冲突、恐怖活动、暴乱、武装叛乱、核爆炸、核辐射或核污染。<br>
                发生上述第（1）项情形导致被保险人身故的，本合同效力终止，我们向被保险人的继承人退还本合同当时的现金价值 。<br>
                发生上述第（1）项情形导致被保险人全残的，本合同效力终止，我们向被保险人退还本合同当时的现金价值。<br>
                发生上述其他情形导致被保险人身故或全残的，本合同效力终止，我们向投保人退还本合同当时的现金价值。<br>
                因下列情形之一，导致被保险人发生身故或全残以外其他保险事故的，我们不承担给付保险金和豁免保险费的责任：<br>
                &nbsp;&nbsp;&nbsp;&nbsp;（1）投保人对被保险人的故意杀害、故意伤害；<br>
                &nbsp;&nbsp;&nbsp;&nbsp;（2）被保险人故意自伤、故意犯罪或抗拒依法采取的刑事强制措施；<br>
                &nbsp;&nbsp;&nbsp;&nbsp;（3）被保险人服用、吸食或注射毒品或未遵医嘱使用管制药品；<br>
                &nbsp;&nbsp;&nbsp;&nbsp;（4）被保险人酒后驾驶机动车、无合法有效驾驶证驾驶机动车或驾驶无有效行驶证的机动车；<br>
                &nbsp;&nbsp;&nbsp;&nbsp;（5）战争、军事冲突、恐怖活动、暴乱、武装叛乱、核爆炸、核辐射或核污染；<br>
                &nbsp;&nbsp;&nbsp;&nbsp;（6）被保险人感染艾滋病病毒或患艾滋病 期间发生保险事故的（本合同约定的经输血、因职业关系、因器官移植导致的艾滋病病毒感染或患艾滋病除外）；<br>
                &nbsp;&nbsp;&nbsp;&nbsp;（7）遗传性疾病 ，先天性畸形、变形或染色体异常 （本合同约定的严重肌营养不良症、肾髓质囊性病、艾森门格综合症、严重肝豆状核变性（Wilson病）、成骨不全症第三型除外）。<br>
                发生上述第（1）项情形导致被保险人发生身故或全残以外其他保险事故的，本合同效力终止，我们向被保险人退还本合同当时的现金价值。<br>
                发生上述其他情形导致被保险人发生身故或全残以外其他保险事故的，本合同效力终止，我们向投保人退还本合同当时的现金价值。<br>

            </div>
        </div>
        <div class="tips_show" id="tips_show2">
            <div class="tips_top">
                《客户告知书及投保人申明》
                <i @click="closeNtice">×</i>
            </div>
            <header>微医（北京）保险经纪有限公司客户告知书</header>
            <div class="tips_cont">
                尊敬的客户：<br>
                &nbsp;&nbsp;&nbsp;&nbsp;感谢您委托我公司代为办理保险业务。本公司是基于投保人的利益，为投保人与保险公司订立保险合同提供提供中介服务的保险专业中介机构。为了维护您的合法权益，根据《中华人民共和国保险法》、《保险经纪机构监管规定》的要求，本公司应履行客户告知义务，现将有关事项告知如下，请仔细阅读。<br>
                一、公司基本情况<br>
                <span class="aquare"></span>&nbsp;&nbsp;&nbsp;&nbsp;公司名称：微医（北京）保险经纪有限公司<br>
                <span class="aquare"></span>&nbsp;&nbsp;&nbsp;&nbsp;住所/经营场所：北京市海淀区北四环西路52号15层1506房间<br>
                <span class="aquare"></span>&nbsp;&nbsp;&nbsp;&nbsp;业务范围：在全国区域内（港、澳、台除外）为投保人拟定投保方案、选择保险人、办理投保手续；协助被保险人或受益人进行索赔；再保险经纪业务；为委托人提供防灾、防损或风险评估、风险管理咨询服务；中报保监会批准的其他业务。<br>
                <span class="aquare"></span>&nbsp;&nbsp;&nbsp;&nbsp; 联系方式：010-59346886<br>
                二、请在确定投保前仔细阅读保险条款，重点关注保险责任、责任免除、被保险人权利义务、免赔额或免赔率的计算、索赔时效、保险公司理赔时限、合同终止与失效及未成年人投保限额等相关内容，并可要求我公司业务业人员对上述内容进行详细讲解。<br>
                三、本公司承诺将通过有效的技术手段和管理措施对投保人（被保险人或受益人）的个人信息、投保交易信息等非公开信息进行保密，严格限制保密信息的接触人，妥善保管保密信息。<br>
                四、根据《中华人民共和国保险法》、《保险经纪机构监管规定》，保险经纪机构因过错给投保人、被保险人造成损失的，依法承担赔偿责任。<br>
                五、我公司已按《保险经纪机构监管机构》投保了职业责任保险。<br>
                六、如果您发现本公司从业人员存在误导行为及其他损害您合法权益的行为，请注意保留相关证据，可向我公司投诉。以上告知事项敬请随时查询、核实。<br><br><br>
                <span class="company_name">微医（北京）保险经纪有限公司</span>
            </div>
            <div class="tips_cont">
                1、投保人（下称本人）已认真阅读并充分理解投保须知、产品条款（尤其是保险责任条款、责任免除条款、合同解除条款）了解本产品的特点，并同意将电子保单送达之日视为保单的客户签收日。<br>
                2、本人确认网络投保流程中填写的各项投保资料及声明正确有效，并同意遵守。本人承诺完全知晓被保险人的所有健康状况，健康告知内容均准确无误，如有不实告知，贵公司有权解除合同，并对解除合同前发生的事故不承担赔偿或给付保险金的责任。<br>
                3、本人已了解并确认上述客户告知书内容。<br>
                4、本人同意，本次投保信息及电子记录凭证等数据电文是本保险合同的组成部分，具备完全证据效力。<br>
            </div>
        </div>
        <button class="o-pay" @click="payment" v-if="payTag">点击支付</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script src="js/rem.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/qs.js"></script>
<script src="js/base.js"></script>
<script>

    //获取地址栏信息
    function GetQueryString(name)

    {

        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");

        var r = decodeURI(window.location.search.substr(1)).match(reg);

        if(r!=null)return  unescape(r[2]); return null;

    }
    var orderId = GetQueryString('orderId') ? GetQueryString('orderId') : 'O18121000836866613175'
    console.log(orderId)
    new Vue({
        el:'.out',
        data:{
            isShows:false,
            payTag:false,
            isOn:false,
            isActive:true,
            info:'',//
            List:''
        },
        mounted:function() {
          this.Opost()
        },
        methods:{
            Opost:function() {
                var _this = this
                axios({
                    url:'order/orderDetail?originCode=xucheng&userId=123456',
                    method:'post',
                    data:Qs.stringify({
                        orderId:orderId
                    })
                }).then(function(res) {
                    console.log('成功',res)
                    _this.info = res.data
                    _this.List = res.data.packageResDto.itemList
                    if(res.data.orderStatus == 1) {
                        _this.payTag = true
                    }else if(res.data.orderStatus == 2 || res.data.orderStatus == 3) {
                        _this.payTag = false
                    }
                    setTimeout(function() {
                        _this.isShows = true
                    },500)
                }).catch(function(res) {
                    console.log('失败',res)
                })
            },
            isShow:function() {
                this.isActive = !this.isActive
            },
            guideChange:function () {
                this.isOn = !this.isOn
            },
            closeKonw: function () {
                document.getElementById('tips_show1').style.display = 'none'
            },
            closeKonw2: function () {
                document.getElementById('tips_show1').style.display = 'block'
            },
            closeNtice: function () {
                document.getElementById('tips_show2').style.display = 'none'
            },
            closeNtice2: function () {
                document.getElementById('tips_show2').style.display = 'block'
            },
            closeGuide: function () {
                document.getElementById('tips_show3').style.display = 'none'
            },
            closeGuide2: function () {
                document.getElementById('tips_show3').style.display = 'block'
            },
            payment:function() {
                document.location.href = 'http://testopen.iancar.cn/srkph5/order/reDire?orignType=soraka&orderId='+this.info.orderId
            }
        }
    })
</script>
</html>